/**
 * 采购管理 采购计划
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>采购管理</el-breadcrumb-item>
      <el-breadcrumb-item>采购计划</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <!-- <el-form-item label="搜索：">
        <el-input
          size="small"
          v-model="formInline.deptName"
          placeholder="请输入商品名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="formInline.deptNo" placeholder="请选择商品类别">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="formInline.deptNo" placeholder="请选择存放仓库">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <!-- <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        > -->

        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleEdit()"
          >录入计划</el-button
        >
        <!-- <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="TestClick()"
          >测试</el-button
        > -->
      </el-form-item>
    </el-form>
    <!--采购计划列表   一级页面-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="编号" width="150">
      </el-table-column>
      <el-table-column sortable prop="depart" label="部门" width="150">
      </el-table-column>
      <el-table-column sortable prop="planDate" label="计划日期" width="150">
      </el-table-column>
      <el-table-column sortable prop="plannerID" label="计划人" width="150">
      </el-table-column>
      <el-table-column sortable prop="others" label="备注" width="150">
      </el-table-column>
      <el-table-column sortable prop="operatorID" label="操作人" width="150">
      </el-table-column>
      <el-table-column sortable prop="inDate" label="录入日期" width="150">
      </el-table-column>
      <el-table-column sortable prop="examinerID" label="审核人" width="150">
      </el-table-column>
      <el-table-column sortable prop="inDate" label="录入日期" width="150">
      </el-table-column>

      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        min-width="100"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="BeginAuditClick(scope.row)"
            >审核采购计划</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 录入计划页面  begin -->
    <el-dialog title="录入计划" :visible.sync="AddPlanDialog" width="70%">
      <el-form :inline="true" :model="AddPlanForm" class="user-search">
        <el-form-item label="部门">
          <el-select v-model="AddPlanForm.Depart" placeholder="请选择部门">
            <el-option label="仓库管理部" value="仓库管理部"></el-option>
            <el-option label="销售部" value="销售部"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划日期">
          <el-date-picker
            v-model="AddPlanForm.PlanDate"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划人">
          <el-select v-model="AddPlanForm.PlannerID" placeholder="请选择计划人">
            <el-option
              v-for="item in PlannerList"
              :key="item.id"
              :label="item.userName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="AddPlanForm.Others"
            type="textarea"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="操作人">
          <el-select
            v-model="AddPlanForm.OperatorID"
            placeholder="请选择操作人"
          >
            <el-option
              v-for="item in OperatorList"
              :key="item.id"
              :label="item.userName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="AddShopClick()"
            >添加商品</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="handleEdit()"
            >删除商品</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="SavePlan()"
            >保存单据</el-button
          >
        </el-form-item>
      </el-form>
      <!--商品明细的列表-->
      <el-table
        size="small"
        :data="PlanDetailList"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column sortable prop="GoodsID" label="商品编号" width="100">
        </el-table-column>
        <el-table-column sortable prop="Quantity" label="数量" width="100">
        </el-table-column>
        <el-table-column sortable prop="Others" label="备注" width="100">
        </el-table-column>

        <el-table-column align="center" label="操作" min-width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 录入计划页面  end -->

    <!-- 录入计划页面 添加功能 begin -->
    <el-dialog title="提示" :visible.sync="AddShopDialog" width="90%">
      <!--列表-->
      <el-table
        size="small"
        :data="AddShopList"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column
          sortable
          prop="productName"
          label="商品名称"
          width="200"
        >
        </el-table-column>
        <el-table-column sortable prop="category" label="类别" width="200">
        </el-table-column>
        <el-table-column sortable prop="units" label="单位" width="200">
        </el-table-column>
        <el-table-column sortable prop="cinfoId" label="仓库编码" width="200">
        </el-table-column>
        <el-table-column
          sortable
          prop="storageWarehouse"
          label="存放仓库"
          width="200"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="unitPriceOfWarehousingPlan"
          label="入库计划单价"
          width="200"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="unitPriceOfDeliveryPlan"
          label="出库计划单价"
          width="200"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="theOriginalInventory"
          label="原始库存"
          width="200"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="alertMinimumStock"
          label="警戒最小库存"
          width="200"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="alertMaximumStock"
          label="警戒最大库存"
          width="200"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="unitPriceOfDeliveryPlan"
          label="出库计划单价"
          width="200"
        >
        </el-table-column>
        <!-- <el-table-column sortable prop="Model" label="型号" width="300">
        <template slot-scope="scope">
          <div>{{ scope.row.editTime | timestampToTime }}</div>
        </template>
      </el-table-column> -->
        <!-- <el-table-column sortable prop="editUser" label="修改人" width="300">
      </el-table-column> -->
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          min-width="150"
        >
          <template slot-scope="scope">
            <el-button
              @click="AddPlanDetailClick(scope.row)"
              type="text"
              size="small"
              >添加至采购计划</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="AddShopDialog = false">取 消</el-button> -->
        <el-button type="primary" @click="AddShopDialog = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <!-- 录入计划页面 添加功能 end -->
    <!-- 添加至采购计划  begin -->
    <el-dialog
      title="添加至采购计划"
      :visible.sync="AddPlanDetialDialog"
      width="50%"
    >
      <el-form ref="form" :model="AddPlanDetailForm" label-width="80px">
        <el-form-item label="商品编码">
          <el-input
            disabled
            v-model="AddPlanDetailForm.CommodityInformationSheetId"
          ></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="AddPlanDetailForm.Quantity"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="AddPlanDetailForm.Others"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddPlanDetialDialog = false">取 消</el-button>
        <el-button type="primary" @click="SavePlanDetailClick">添加</el-button>
      </span>
    </el-dialog>
    <!-- 添加至采购计划  end -->

    <!-- 选择审核人页面 begin -->
    <el-dialog title="审核" :visible.sync="AuditDialog" width="50%">
      <el-form ref="form" :model="AuditForm" label-width="150px">
        <el-form-item label="请选择审核人">
          <el-select
            v-model="AuditForm.value"
            @change="AuditChange"
            placeholder="请选择审核人"
          >
            <el-option
              v-for="item in AuditList"
              :key="item.id"
              :label="item.userName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-if="count > 1">
          <el-form-item
            v-for="(item1, index) in ParamterList"
            :key="item1.id"
            :label="item1.Label"
          >
            <el-select
              v-model="item1.AuditValue"
              @change="AuditChange($event, index)"
              placeholder="请选择审核人"
            >
              <el-option
                v-for="item in AuditList"
                :key="item.id"
                :label="item.userName"
                :value="item.id"
              ></el-option>
            </el-select>
            <i class="el-icon-delete" @click="DelAudit(item1, index)"></i>
          </el-form-item>
          <el-form-item> </el-form-item>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="AuditDialog = false">取 消</el-button>

        <el-button type="primary" @click="AddAudit">添加新的审核人</el-button>
        <el-button type="primary" @click="SaveAuditClick">开始审核</el-button>
      </span>
    </el-dialog>
    <!-- 选择审核人页面 end -->
  </div>
</template>

<script>
import { AddCaiGouPlan, CaiGouPlanList } from "../../api/userMG";
import Pagination from "../../components/Pagination";
import { GoodsList } from "../../api/basisMG";
import { userList, AddAuditLogging } from "../../api/likai";
export default {
  data() {
    return {
      ParamterList: [],
      AuditForm: {
        UserInfosId: "",
        WenJianId: "",
        Idea: "",
        Reorder: "",
        AuditStatus: "",

        CreateTime: "",
        UserInfosIdList: [],
      },
      AuditorList: [],
      AuditList: [],
      count: 2, //控制审核认的数量
      AuditLabel: "",

      AuditDialog: false, //控制审核对话框的显示与隐藏
      AddPlanDialog: false, //控制录入计划页面的显示与隐藏
      PlannerList: [], //计划人列表
      OperatorList: [], //操作人列表
      //添加采购计划表单
      AddPlanForm: {
        Depart: "",
        PlanDate: "",
        PlannerID: "", //计划人
        Others: "",
        OperatorID: "", //操作人
      },
      // UserForm: {
      //   id: "",
      //   userName: "",
      //   userPwd: "",
      //   userState: "",
      //   creator: "",
      //   createTime: "",
      //   isDeleted: "",
      // },
      //添加计划明细表单
      AddPlanDetailForm: {
        CommodityInformationSheetId: "", //商品编码
        Quantity: "100", //数量
        Others: "一个正经的备注", //备注
      },
      AddPlanDetialDialog: false,
      form: {},
      PlanDetailList: [], //采购明细的列表
      AddShopList: [],
      AddShopDialog: false, //控制添加商品添页面显示与隐藏
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载

      title: "添加",

      // rules表单验证
      rules: {
        deptName: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
        ],
        deptNo: [
          { required: true, message: "请输入部门代码", trigger: "blur" },
        ],
      },
      formInline: {
        // page: 1,
        // limit: 10,
        // varLable: "",
        // varName: "",
        // token: localStorage.getItem("logintoken"),
        Name: "123",
        Pwd: "123",
      },
      // 删除部门
      seletedata: {
        ids: "",
        token: localStorage.getItem("logintoken"),
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      ShopList: [], //商品数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline);
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getdata(parameter) {
      this.loading = true;

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */

      CaiGouPlanList(parameter)
        .then((res) => {
          this.loading = false;
          this.listData = res;
          // if (res.success == false) {
          //   this.$message({
          //     type: 'info',
          //     message: res.msg
          //   })
          // } else {
          //   this.listData = res.data
          //   // 分页赋值
          //   this.pageparm.currentPage = this.formInline.page
          //   this.pageparm.pageSize = this.formInline.limit
          //   this.pageparm.total = res.count
          // }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("菜单加载失败，请稍后再试！");
        });
    },
    TestClick() {
      this.getdata();
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    //显示录入计划页面
    handleEdit: function (index, row) {
      this.AddPlanDialog = true;
      this.title = "录入计划页面";
      var that = this;
      userList().then((res) => {
        console.log("输出用户列表" + res);
        that.PlannerList = res;
        that.OperatorList = res;
      });
    },

    //录入计划页面，添加商品单击事件
    AddShopClick(parameter) {
      console.log("点击添加商品，进入添加商品页面，显示商品列表");
      this.AddShopDialog = true;
      GoodsList(parameter)
        .then((res) => {
          this.loading = false;
          this.AddShopList = res;
        
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("菜单加载失败，请稍后再试！");
        });
    },

    //添加至采购计划按钮
    AddPlanDetailClick(row) {
      console.log("打开了添加商品的对话框");
      console.log(row);
      console.log(this.AddPlanDetailForm);
      this.AddPlanDetailForm.CommodityInformationSheetId = row.id;
      this.AddPlanDetailForm.Quantity = "";
      this.AddPlanDetailForm.Others = "";
      this.AddPlanDetialDialog = true;
    },
    //保存采购计划详情单击事件
    SavePlanDetailClick() {
      console.log("输出添加的商品信息");
      this.PlanDetailList.push(this.AddPlanDetailForm);
      console.log("输出列表");
      console.log(this.PlanDetailList);
      this.AddPlanDetialDialog = false;
    },
    //保存计划
    SavePlan() {
      var parameter = {
        Depart: this.AddPlanForm.Depart,
        PlanDate: this.AddPlanForm.PlanDate,
        PlannerID: this.AddPlanForm.PlannerID,
        Others: this.AddPlanForm.Others,
        OperatorID:sessionStorage.getItem('userId'),
        PlanDetailDtos: this.PlanDetailList,
      };
      AddCaiGouPlan(parameter).then((res) => {
        console.log("输出执行结果");
        console.log(res);
        if (res == null) {
          this.$message({
            type: "info",
            message: "出错了",
          });
        } else {
          this.$message({
            type: "success",
            message: "成功",
          });
          this.AddPlanDialog = false;
          this.getdata(this.formInline);
        }
      });
    },
    //开始审核
    BeginAuditClick(row) {
      console.log("开始审核");
      this.ParamterList = [];
      this.count = 1;
      userList().then((res) => {
        this.AuditList = res;
      });
      console.log("输出一行数据");
      console.log(row);
      this.AuditForm.WenJianId = row.id;
      this.AuditDialog = true;
    },
    AddAudit() {
      this.count = this.count + 1;
      var para = {
        Id: this.count,
        Label: `请选择审核人`,
        AuditValue: `请选择审核人`,
      };
      this.ParamterList.push(para);
    },
    DelAudit(item, index) {
      console.log(index);
      this.ParamterList.splice(index, 1);
      this.count = this.count - 1;
      this.AuditorList.splice(index, 1);
      console.log(this.AuditorList);
    },
    SaveAuditClick() {
      console.log(this.AuditForm);
      this.AuditForm.UserInfosIdList = this.AuditorList;
      AddAuditLogging(this.AuditForm)
        .then((res) => {
          if (res == null) {
            this.$message({
              type: "info",
              message: "添加审核记录失败",
            });
          } else {
            this.$message({
              type: "success",
              message: "添加审核记录成功",
            });
            this.getdata();
          }
        })
        .catch();
      this.AuditDialog = false;
    },
    AuditChange(item, index) {
      if (this.AuditorList.length < this.count) {
        this.AuditorList.push(item);
      } else {
        this.AuditorList.splice(index, 1, item);
      }
      console.log(this.AuditorList);
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 